<template>
	<view class="search">
		<text class="icon iconfont icon-search"></text>
		<scroll-view scroll-x="true" class="imgs" v-show="imgs.length>0">
		<!-- animate__animated animate__fadeInLeft -->
			<image class="imgs-image " v-for=" item in imgs" :src="item.avatar" :key="item.id" mode="aspectFit" />
		</scroll-view>
		<input class="search-input" type="text" :placeholder="placeholder"/>
	</view>
</template>

<script setup>
	const props = defineProps({
		imgs:{
			type:Array,
			// required:true,
			default:[]
		},
		placeholder:{
			type:String,
			default:"搜索",
		}
	})
	// import {ref} from 'vue';
	
	// const imgs = ref(["../../static/logo.png","../../static/logo.png"])
</script>

<style lang="scss" scoped>
.search {
	// position: fixed;
	top: 0;
	left: 0;
	height: 80upx;
	display: flex;
	width: 100%;
	align-items: center;
	gap: 10upx;
	padding: 6upx 10upx;
	background-color: #fff;
	z-index: 100;
	.iconfont {
		font-size: 50upx;
		color: #CCC;
	}
	&-input{
		padding: 20upx 0;
		flex: 1;
	}
	.imgs{
		display: flex;
		width: auto;
		max-width: 550upx;
		align-items: center;
		justify-content: center;
		height: 68upx;
		white-space: nowrap;
		// gap: 20upx;
		&-image{
			width: 60upx;
			height: 60upx;
			margin: 0 3upx;
			border-radius: 10upx;
		}
	}
}
</style>
